<template>
    <view class="order-success">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        
        <!-- 购买成功提示区域 -->
        <view class="success-section">
            <view class="success-title">购买成功</view>
            <view class="success-icon">
                <image class="checkmark-icon" :src="checkmarkIcon" mode="aspectFit"></image>
            </view>
            <view class="success-text">购买成功</view>

            <!-- 操作按钮 -->
            <view class="action-buttons">
                <view class="btn-back-home" @click="goToHome">返回首页</view>
                <view class="btn-view-order" @click="viewOrder">查看订单</view>
            </view>
        </view>

        <!-- 为您推荐 -->
        <view class="recommend-section">
            <view class="recommend-divider">
                <view class="divider-line"></view>
                <text class="divider-text">为您推荐</text>
                <view class="divider-line"></view>
            </view>

            <!-- 推荐商品列表（瀑布流布局） -->
            <view class="waterfall-container" v-if="recommendList.length > 0">
                <view class="waterfall-column" v-for="(column, colIndex) in waterfallColumns" :key="colIndex">
                    <view class="product-item-waterfall" v-for="(item, index) in column" :key="index"
                        @click="goToProductDetail(item)">
                        <image :src="item.img" mode="widthFix"></image>
                        <view class="product-info-waterfall">
                            <view class="product-title">{{ item.title }}</view>
                            <view class="product-synopsis">{{ item.synopsis }}</view>
                            <view class="product-price">
                                <text class="price">¥{{ item.price }}</text>
                                <text class="original-price" v-if="item.original_price">¥{{ item.original_price
                                    }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 无数据提示 -->
            <view v-if="recommendList.length === 0" class="no-data">
                <text>暂无推荐商品</text>
            </view>
        </view>
    </view>
</template>

<script>
import { public_img } from '@/static/public.js';

export default {
    data() {
        return {
            statusBarHeight: 0, // 状态栏高度
            // 成功图标（base64编码的SVG）
            checkmarkIcon: '',
            recommendList: [], // 推荐商品列表
            waterfallColumnCount: 2, // 瀑布流列数
            waterfallColumns: [[], []] // 瀑布流列数据
        };
    },
    onLoad() {
        // 获取设备状态栏高度
        this.getStatusBarHeight();
        // 从本地存储获取推荐商品数据
        this.loadRecommendList();
    },
    methods: {
        // 获取设备状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
                console.log('状态栏高度:', this.statusBarHeight);
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                // 默认状态栏高度
                this.statusBarHeight = 20;
            }
        },

        // 加载推荐商品列表
        loadRecommendList() {
            try {
                // 从本地存储获取 listAll 数据
                const listAll = uni.getStorageSync('listAll');

                if (listAll && Array.isArray(listAll) && listAll.length > 0) {
                    // 处理图片路径
                    this.recommendList = listAll.map(item => ({
                        ...item,
                        img: item.img && item.img.startsWith('http')
                            ? item.img
                            : (public_img + (item.img || ''))
                    }));

                    // 构建瀑布流数据
                    this.buildWaterfallData();
                } else {
                    console.log('没有推荐商品数据');
                    this.recommendList = [];
                    this.waterfallColumns = [[], []];
                }
            } catch (error) {
                console.error('加载推荐商品列表失败:', error);
                this.recommendList = [];
                this.waterfallColumns = [[], []];
            }
        },

        // 构建瀑布流数据
        buildWaterfallData() {
            // 初始化列数组
            const columns = Array.from({ length: this.waterfallColumnCount }, () => []);

            // 将商品列表按顺序分配到各列
            this.recommendList.forEach((item, index) => {
                const columnIndex = index % this.waterfallColumnCount;
                columns[columnIndex].push(item);
            });

            // 更新瀑布流列数据
            this.waterfallColumns = columns;
        },

        // 跳转到商品详情
        goToProductDetail(item) {
            if (item && item.id) {
                uni.navigateTo({
                    url: `/pages/product/index?id=${item.id}`
                });
            }
        },

        // 返回首页
        goToHome() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },

        // 查看订单
        viewOrder() {
            uni.navigateTo({
                url: '/pages/check/index'
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.order-success {
    min-height: 100vh;
    background-color: #FAFAFA;
    padding-bottom: 40rpx;
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: #FAFAFA;
}

/* 购买成功提示区域 */
.success-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-title {
    width: 100%;
    background-color: white;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    font-size: 18px;
    color: #383838;
    margin-bottom: 43px;
    font-weight: 700;
}

.success-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark-icon {
    width: 46px;
    height: 46px;
}

.success-text {
    font-size: 20px;
    color: #505050;
    margin-bottom: 50rpx;
}

/* 操作按钮 */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 600rpx;
    padding: 0 30rpx;
}

.btn-back-home {
    border: 1px solid #b3b3b3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #b3b3b3;
    padding: 1px 7px;
    border-radius: 3px;
}

.btn-view-order {
    background-color: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #fff;
    padding: 1px 7px;
    border-radius: 3px;
}

/* 为您推荐区域 */
.recommend-section {
    margin-top: 40rpx;
}

.recommend-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
}

.divider-line {
   width: 60px;
    height: 0.5px;
    background-color: #646464;
}

.divider-text {
    font-weight: 350;
    margin: 0 20rpx;
    font-size: 28rpx;
    color: #646464;
}

/* 瀑布流布局（与首页相同） */
.waterfall-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
}

.waterfall-column {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-right: 15rpx;
}

.waterfall-column:last-child {
    margin-right: 0;
}

.product-item-waterfall {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
    padding: 5px;
}

.product-item-waterfall image {
    width: 100%;
    border-radius: 5.5px;
}

.product-info-waterfall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-title {
    font-size: 14px;
    color: #505050;
    margin-bottom: 3px;
}

.product-synopsis {
    font-size: 13px;
    color: #8b8b8c;
    margin-bottom: 10px;
    flex: 1;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-price {
    display: flex;
    align-items: center;
}

.price {
    font-size: 14px;
    color: #ff4757;
    margin-right: 10rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

/* 无数据提示 */
.no-data {
    text-align: center;
    padding: 50rpx 0;
    color: #999;
    font-size: 28rpx;
}
</style>
